body{
    position: relative;
}
a:hover{
	text-decoration: none;
}
a{
	outline: none;
}
.ch-grid{
	display: block;
    list-style: none outside none;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    max-width: 1200px;
    *width: 950px;
}
.ch-grid li{
	display: inline-block;
    height: 165px;
    margin-left: 20px;
    width: 165px;

    *float: left;
}
.ch-item {
	width: 100%;
	height: 100%;
	position: relative;
	border-radius: 50%;
	
}
.ch-item a{
	outline: none;
}

.ch-info-wrap, 
.ch-info{
	position: relative;
	width: 141px;
	height: 141px;
	border-radius: 50%;
	cursor: pointer;
}

.ch-info-wrap {
	top: 12px;
	left: 12px;
	*left: 0;
	box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.2);
	background: rgba(200, 200, 200, 0.7);
}

.ch-info > div {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;	
	-webkit-backface-visibility: hidden;
	left: 0;
	top: 0;
}

.ch-info .ch-info-front {
	-webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	-ms-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
}

.ch-info .ch-info-back {
	opacity: 0;
	pointer-events: none;
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
	-webkit-transition: all 0.4s ease-in-out 0.2s;
	-moz-transition: all 0.4s ease-in-out 0.2s;
	-o-transition: all 0.4s ease-in-out 0.2s;
	-ms-transition: all 0.4s ease-in-out 0.2s;
	transition: all 0.4s ease-in-out 0.2s;
}

.ch-img-1 { 
	background: url(../img/nav1.png) no-repeat center center;
	background-image: url(../img/nav-1.png)\9;
}

.ch-img-2 { 
	background: url(../img/nav2.png) no-repeat center center;
	background-image: url(../img/nav-2.png)\9;
}

.ch-img-3 { 
	background: url(../img/nav3.png) no-repeat center center;
	background-image: url(../img/nav-3.png)\9;
}
.ch-img-4 { 
	background: url(../img/nav4.png) no-repeat center center;
	background-image: url(../img/nav-4.png)\9;
}

.ch-img-5 { 
	background: url(../img/nav5.png) no-repeat center center;
	background-image: url(../img/nav-5.png)\9;
}
.ch-info .ch-img-1,.ch-info .ch-img-2,.ch-info .ch-img-3,.ch-info .ch-img-4,.ch-info .ch-img-5{
	background:none\9;
}
.ch-img-1 a:hover .ch-info-img-1,.ch-img-1 a.current .ch-info-img-1{
	background: url(../img/nav1-hover.png) no-repeat center center;
}

.ch-img-2 a:hover .ch-info-img-2,.ch-img-2 a.current .ch-info-img-2{
	background: url(../img/nav2-hover.png) no-repeat center center;
}
.ch-img-3 a:hover .ch-info-img-3,.ch-img-3 a.current .ch-info-img-3{
	background: url(../img/nav3-hover.png) no-repeat center center;
}
.ch-img-4 a:hover .ch-info-img-4,.ch-img-4 a.current .ch-info-img-4{
	background: url(../img/nav4-hover.png) no-repeat center center;
}
.ch-img-5 a:hover .ch-info-img-5,.ch-img-5 a.current .ch-info-img-5{
	background: url(../img/nav5-hover.png) no-repeat center center;
}
.ch-info-back span{
	display: inline-block;
	width: 100%;
	height:100%;
}
.ch-item:hover .ch-info-front{
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	opacity: 0;
} 

.ch-item:hover .ch-info-back, .current .ch-info-back {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
	pointer-events: auto;
}

.main{
	position: fixed;
	width: 100%;
	z-index: 99;
	bottom: 0;
}
#nav{
	list-style: none;
	position: fixed;
	right: 20px;
	z-index: 999;
}

#nav li{
	margin: 0 0 15px 0;	
}
#intro, #second, #third, #fourth, #fifth,#sixth{
	min-width: 1024px;
	box-shadow: 0 80px 80px rgba(0,0,0,0.3);
}

#intro{
	background:url(../img/bg.jpg) center 0 repeat-x fixed;
	margin: 0 auto;
	z-index: 97;
	width: 100%;
}

#second{
	background: url(../img/bg2.jpg) center 0 repeat-x fixed;
	width: 100%;
	color: white;
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
	z-index: 96;
}
#second .bg-1993{
	background: url(../img/1993.png) 55% 0 no-repeat fixed;
}
#second .bg-1993-time{
	background: url(../img/1993-time.png) 55% 0 no-repeat fixed;
}
#second .bg-1993-monkey{
	background: url(../img/1993-monkey.png) 55% 0 no-repeat fixed;
}
#third .bg-1996{
	background: url(../img/yahoo.png) 55% 0 no-repeat fixed;
}
#third .bg-1996-time{
	background: url(../img/1996-time.png) 58.4% 0 no-repeat fixed;
}
#third .bg-1996-monkey{
	background: url(../img/1996-monkey.png) 55% 0 no-repeat fixed;
}
#second .bg-1993,#second .bg-1993-time,#second .bg-1993-monkey,
#third .bg-1996,#third .bg-1996-time,#third .bg-1996-monkey,
#fourth .bg-2001,#fourth .bg-2001-time,#fourth .bg-2001-human,
#fifth .bg-2007,#fifth .bg-2007-human,#fifth .bg-browser,#fifth .bg-tips,#fifth .bg-2007-ie,
#sixth .bui-bg,#sixth .what-bui,#sixth .bui-human{
	height: 100%;
	top: 0;
	position: absolute;
	width: 100%;
	z-index: 98;
}
#third{
	background: url(../img/bg3.jpg) 50% 0 no-repeat fixed;
	z-index: 95;
	width: 100%;
}

#fourth{
	background: url(../img/bg4.jpg) 50% 0 no-repeat fixed;	
	z-index: 94;
	width: 100%;
}

#fifth{
	background: url(../img/bg5.jpg) 50% 0 no-repeat fixed;
	z-index: 93;
	width: 100%;
}

#sixth{
	background: url(../img/bgbottom.jpg) 50% 0 no-repeat fixed;
	width: 100%;
	z-index: 92;
}
#fourth .bg-2001{
	background: url(../img/2001-ie.png) 55% 0 no-repeat fixed;
}
#fourth .bg-2001-time{
	background: url(../img/2001-time.png) 55% 0 no-repeat fixed;
}
#fourth .bg-2001-human{
	background: url(../img/2001-human.png) 55% 0 no-repeat fixed;
}

#fifth .bg-2007{
	background: url(../img/2007-time.png) 70% 0 no-repeat fixed;
}
#fifth .bg-2007-human{
	background: url(../img/2007-human.png) 70% 0 no-repeat fixed;
}
#fifth .bg-browser{
	background: url(../img/browser.png) 55% 0 no-repeat fixed;
}
#fifth .bg-tips{
	background: url(../img/2007-tips.png) 55% 0 no-repeat fixed;
}
#fifth .bg-2007-ie{
	background: url(../img/2007-ie.png) 55% 0 no-repeat fixed;
}
#sixth .bui-bg{
	background: url(../img/bui-bg.png) 70% 0 no-repeat fixed;
}
#sixth .what-bui{
	background: url(../img/what-bui.png) 70% 0 no-repeat fixed;
}
#sixth .study{
	min-width: 1024px;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	height: 100%;
	z-index: 100;
}

#sixth .study ul{
	background: url("../img/do.png") no-repeat;
    bottom: 30%;
    height: 129px;
    padding: 50px 10px 0;
    position: absolute;
    width: 265px;
    left: 200px;
    z-index: 100;
}
#sixth .study li{
	height:30px;
	line-height: 30px;
}
#sixth .study li.quick,#sixth .study li.demo,#sixth .study li.examples{
	background: url('../img/do-icon.png') no-repeat;
	padding-left: 32px;
}
#sixth .study li:hover{
	background-color:rgb(50,170,255);
	background-color:rgba(50,170,255,0.5); 
	transition: background-color 0.6s ease-in-out;
}
#sixth .study li.quick{
	background-position: 10px 10px;	
}
#sixth .study li.demo{
	background-position: 10px -25px;	
}
#sixth .study li.examples{
	background-position: 10px -55px;	
}
#sixth .study a{
	font-family: '微软雅黑';
	font-size: 16px;
	color: #fff;
}
#sixth .bui-human{
	background: url(../img/bui-human.png) 60% 0 no-repeat fixed;
}


.header-logo{
	background: url(../img/logo.png) 50% 0 no-repeat fixed;
	width: 100%;
	position: absolute;
	top: 0;
}

#nav li a {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background-color: white;
	border: solid 2px white;
}

#nav li a.current {
	background-color: orange;
}